@font-face{
  font-family: "icons-turn-arrow";
  src: url('../font/iconfont.eot') format('embedded-opentype'),
  url('../font/iconfont.woff') format('woff'),
  url('../font/iconfont.ttf') format('truetype'),
  url('../font/iconfont.svg#iconfont') format('svg');
}
/**
 * 全局样式
 */
html,body{
  background:rgb(211,211,211);
  width:100%;
  height:100%;
  padding:0;
  margin:0;

}


.content{

  width:100%;
  height:100%;

}

/*
图片区样式
 */

.stage{
  position:relative;
  width:100%;
  height:100%;

}

.stage-img{
  position:relative;
  width:100%;
  height:100%;
  perspective: 1800px;
  overflow:hidden;

}

.stage-img .figure-container{
      position:absolute;
      height:360px;
      width:320px;
      padding:40px;
      margin:0;
      box-sizing:border-box;
      background-color:#fff;
      cursor: pointer;
      transform-origin:0 50% 0;
      transform-style: preserve-3d;
      transition: transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;


}

.stage-img .is-inverse{
  transform: translate(320px)  rotateY(180deg);
}

.stage-img .figure-text-container{
      text-align:center;
      width:100%;
      height:40px;
      margin-top:30px;
      box-sizing:border-box;

}

 .stage-img .figure-text-container .figure-title{
        font-size:14px;
        color:#ccc;
        line-height:1em;

        }

 .stage-img .figure-text-container .img-back {

      position:absolute;
      left: 0;
      top: 0;
      width:100%;
      height:100%;
      padding:30px;
      box-sizing:border-box;
      text-align:center;
      color:#ccc;
      transform :rotateY(180deg);
      background:#fff;
    }










.stage-switch{
  width:100%;
  position:absolute;
  left:0;
  bottom:30px;
  text-align:center;
  z-index:101;
}

.stage-switch .controllerUnit{
  display:inline-block;
  width:30px;
  height:30px;
  background:#aaa;
  margin:0 5px;
  border-radius:50%;
  cursor:pointer;
  line-height:30px;
  vertical-align:middle;
  transform:scale(0.5);
  transition: transform .6s ease-in-out, background .6s ease-in-out;
}

.stage-switch .is-center{
  transform:scale(1);
  background:#888;
}

.stage-switch .is-center::after{

  font-family:'icons-turn-arrow';
  font-size:16px;
  font-style:normal;
  content:"\e634";
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.stage-switch .is-inverse{
  transform: rotateY(180deg);
}

